@use './normalize.scss';

/* Define the "system" font family */
@font-face {
  font-family: system;
  font-style: normal;
  font-weight: 300;
  src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"),
    local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"),
    local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}

@supports (font-variation-settings: normal) {
  @font-face {
    font-family: 'Fira Code';
    src: url('/fonts/FiraCode-VF.woff2') format('woff2 supports variations'),
         url('/fonts/FiraCode-VF.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
  }
}

html, body {
  @apply bg-white font-sans antialiased #{!important};
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/**
 * Utilities
 * -------------------------
 */

// Hides the scrollbar when overflow: auto. Use this sparingly -- it's not accessible!
.hide-scrollbar {
  scrollbar-width: 0; // Firefox

  // Chrome
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}

// Dark scrollbars, anything with dark:
.force-dark {
  color-scheme: dark;
}

// Light scrollbars, anything with light:
.force-light {
  color-scheme: light;
}

/**
 * Common theming
 * -------------------------
 */

::selection {
  @apply bg-gray-200 bg-opacity-30;
}

/**
 * Global Resets
 * -------------------------
 */

// Input Resets
// Taken from Tailwind CSS Forms -- a plugin for tailwind.
// We could probably add these into TailwindCSS directly
// https://github.com/tailwindlabs/tailwindcss-forms
// [type="search"]::-webkit-search-cancel-button,
// [type="search"]::-webkit-search-decoration {
//   -webkit-appearance: none !important;
//   appearance: none !important;
// }

[multiple],
[type=date],
[type=datetime-local],
[type=email],
[type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=time],
[type=url],
[type=week],
select,
textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #fff;
	border-color: #6b7280;
	border-width: 1px;
	border-radius: 0;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
	font-size: 1rem;
	line-height: 1.25rem;
}

[multiple]:focus,
[type=date]:focus,
[type=datetime-local]:focus,
[type=email]:focus,
[type=month]:focus,
[type=number]:focus,
[type=password]:focus,
[type=search]:focus,
[type=tel]:focus,
[type=text]:focus,
[type=time]:focus,
[type=url]:focus,
[type=week]:focus,
select:focus,
textarea:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
	--tw-ring-inset: var(--tw-empty, );
	/*!*/
	/*!*/
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: #2563eb;
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	border-color: #2563eb;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
	color: #6b7280;
	opacity: 1;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
	color: #6b7280;
	opacity: 1;
}

input::placeholder,
textarea::placeholder {
	color: #6b7280;
	opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper {
	padding: 0;
}

::-webkit-date-and-time-value {
	min-height: 1.5em;
}

select {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
	background-position: right .5rem center;
	background-repeat: no-repeat;
	background-size: 1.5em 1.5em;
	padding-right: 2.5rem;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

[multiple] {
	background-image: initial;
	background-position: initial;
	background-repeat: unset;
	background-size: initial;
	padding-right: .75rem;
	-webkit-print-color-adjust: unset;
	print-color-adjust: unset;
}

[type=checkbox],
[type=radio] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
	display: inline-block;
	vertical-align: middle;
	background-origin: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	flex-shrink: 0;
	height: 1rem;
	width: 1rem;
	color: #2563eb;
	background-color: #fff;
	border-color: #6b7280;
	border-width: 1px;
}

[type=checkbox] {
	border-radius: 0;
}

[type=radio] {
	border-radius: 100%;
}

[type=checkbox]:focus,
[type=radio]:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
	--tw-ring-inset: var(--tw-empty);
	--tw-ring-offset-width: 2px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: #2563eb;
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
}

[type=checkbox]:checked,
[type=radio]:checked {
	border-color: transparent;
	background-color: currentColor;
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}

[type=checkbox]:checked {
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

[type=radio]:checked {
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

[type=checkbox]:checked:focus,
[type=checkbox]:checked:hover,
[type=radio]:checked:focus,
[type=radio]:checked:hover {
	border-color: transparent;
	background-color: currentColor;
}

[type=checkbox]:indeterminate {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
	border-color: transparent;
	background-color: currentColor;
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}

[type=checkbox]:indeterminate:focus,
[type=checkbox]:indeterminate:hover {
	border-color: transparent;
	background-color: currentColor;
}

[type=file] {
	background: unset;
	border-color: inherit;
	border-width: 0;
	border-radius: 0;
	padding: 0;
	font-size: unset;
	line-height: inherit;
}

[type=file]:focus {
	outline: 1px auto -webkit-focus-ring-color;
}


input[type="search"].dark {
  background: #222;
  color: #fff;
}

input[type="search"].light {
  background: #fff;
  color: #222;
}
input[type="search"].suffix::-webkit-search-cancel-button {
  @apply pr-[3.25em];
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  margin: 1em;
  height: 1em;
  width: 1em;
  border-radius: 50em;
  background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg)
    no-repeat 50% 50%;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
}

input[type="search"]:focus::-webkit-search-cancel-button {
  opacity: 0.3;
  pointer-events: all;
}

input[type="search"].dark::-webkit-search-cancel-button {
  filter: invert(1);
}
